import { useEcharts } from '@/hooks/useEcharts';
import useStores from '@/hooks/useStores';
import React, { useRef } from 'react';
import MyCard from './mycard';

const option = {
    legend: {
        top: 'top'
    },
    toolbox: {
        show: true,
        feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
        }
    },
    series: [
        {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [20, 100],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
                borderRadius: 8
            },
            data: [
                { value: 40, name: 'rose 1' },
                { value: 38, name: 'rose 2' },
                { value: 32, name: 'rose 3' },
                { value: 30, name: 'rose 4' },
                { value: 28, name: 'rose 5' },
                { value: 26, name: 'rose 6' },
                { value: 22, name: 'rose 7' },
                { value: 18, name: 'rose 8' }
            ]
        }
    ]
};
const PieEcharts: React.FC = () => {
    const chartRef = useRef<HTMLDivElement>(null);
    const { themes } = useStores();
    useEcharts(chartRef, { option, style: { width: '100%', height: '400px' }, theme: themes.type });

    return (
        <MyCard title="饼图">
            <div ref={chartRef} style={{ width: '100%', height: '400px' }} />
        </MyCard>
    )
}

export default PieEcharts;